<template>
  <div class="_body">
  <div  class="_header">
    {{ title }}
    <p></p>

  <div>
    <el-button size="large" type="primary" @click="fun1">场景分类</el-button>
    <el-button size="large" type="primary" @click="fun2">变化检测</el-button>
  </div>

    <div>
      <p>
        <el-select
            v-model="model"
            placeholder="请选择模型"
            size="large"
            style="width: 240px"
        >
          <el-option
              v-for="item in options"
              :key="item.value"
              :value="item.value"
          />
        </el-select>
        <el-button type="success" size="large" style="width: 150px;">运行</el-button>
      </p>
    </div>
  </div>
  <p></p>

  <div class="container" style="height:900px" v-show="top">
    <div class="upload_container">
      <el-card style=" width: 600px">
        <template #header>
          <el-text>选择图像文件</el-text>
        </template>
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <el-icon>
            <Plus/>
          </el-icon>

          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
              <span class="el-upload-list__item-actions">
          <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in/></el-icon>
          </span>
          <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
          >
            <el-icon><Download/></el-icon>
          </span>
          <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
          >
            <el-icon><Delete/></el-icon>
          </span>
        </span>
            </div>
          </template>
        </el-upload>
        <br>
        <el-text>请输入待测试的影像</el-text>

      </el-card>
    </div>



    <div class="result">
      <div class="result_content">
        <el-card style="width: 600px">
          <template #header>
            <el-text>预测结果</el-text>
          </template>
          <el-form>
            <el-form-item label="预测场景类别">
              <el-text>｛｛预测场景类别｝｝</el-text>
            </el-form-item>
            <el-form-item label="CAM可视化结果">
              <img src="" alt="cam可视化结果">
            </el-form-item>
          </el-form>


        </el-card>
      </div>


    </div>
  </div>

  <div class="container" style="height: 900px" v-show="bottom">
    <div class="upload_container">
      <el-card style="width: 600px">
        <template #header>
          <el-text>选择图像文件</el-text>
        </template>
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <el-icon>
            <Plus/>
          </el-icon>

          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
              <span class="el-upload-list__item-actions">
          <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in/></el-icon>
          </span>
          <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
          >
            <el-icon><Download/></el-icon>
          </span>
          <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
          >
            <el-icon><Delete/></el-icon>
          </span>
        </span>
            </div>
          </template>
        </el-upload>
        <br>
        <el-text>请输入T1时刻影像</el-text>
        <p></p>
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <el-icon>
            <Plus/>
          </el-icon>

          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
              <span class="el-upload-list__item-actions">
          <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in/></el-icon>
          </span>
          <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
          >
            <el-icon><Download/></el-icon>
          </span>
          <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
          >
            <el-icon><Delete/></el-icon>
          </span>
        </span>
            </div>
          </template>
        </el-upload>
        <br>
        <el-text>请输入T2时刻影像</el-text>

      </el-card>
    </div>



    <div class="result">
      <div class="result_content">
        <el-card style="width: 600px">
          <template #header>
            <el-text>预测结果</el-text>
          </template>
          <el-image :src='url1' fir="fill"/>
        </el-card>
      </div>
<!--      <div class="result_content">-->
<!--        <el-card style="width: 350px;">-->
<!--          <template #header>-->
<!--            <el-text>真实结果</el-text>-->
<!--          </template>-->
<!--          <el-image :src='url2' fit="fill"/>-->
<!--        </el-card>-->
<!--      </div>-->
    </div>
  </div>

  <el-dialog v-model="dialogVisible" class="el-col-8">
    <img :src="dialogImageUrl" alt="Preview Image"/>
  </el-dialog>
  </div>
</template>

<script lang="ts" setup name="test">
import {ref} from 'vue'
import {Delete, Download, Plus, ZoomIn} from '@element-plus/icons-vue'

import type {UploadFile} from 'element-plus'

const top =ref(false);
const bottom = ref(false);
const title = ref('标题')
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
const model = ref()
const url1 = ref<string>( 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
const url2 = ref<string>( 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg');
const change = () => {
  title.value='变化后的标题';
  url1.value = "../img/1.jpg";
  url2.value = "../img/1.jpg";
}
const options = [
  {
    value: 'Random',
    key: 'Random'
  },
  {
    value: 'ImageNet',
    key: 'ImageNet'
  },
  {
    value: 'Emp-TP',
    key: 'Emp-TP'
  }
]
const fun1 = () => {
  top.value= !top.value;
  bottom.value= false;
}
const fun2 = () => {
  top.value= false;
  bottom.value =!bottom.value;
}
const handleRemove = (file: UploadFile) => {
  console.log(file)
}

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const handleDownload = (file: UploadFile) => {
  console.log(file)
}
</script>
<style scoped>

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;


}

.upload_container {
  padding: 10px;
  height: 300px;
}

.select_model_container {
  padding: 10px;
  height: 300px;
}

.result {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 10px;
}

.result_content {
  padding-left: 10px;
}
._header {
  height: 150px;
  padding-top: 30px;
}
.el-card {
  height: 700px;
}
._body{
  background:
      linear-gradient(to bottom, #D5DEE7 0%, #E8EBF2 50%, #E2E7ED 100%),
      linear-gradient(to bottom, rgba(0,0,0,0.02) 50%, rgba(255,255,255,0.02) 61%, rgba(0,0,0,0.02) 73%),
      linear-gradient(33deg, rgba(255,255,255,0.20) 0%, rgba(0,0,0,0.20) 100%);
  background-blend-mode: normal,color-burn;
}
</style>
